<template>
	<van-dialog
      v-model="showDialog"
      title="请输入支付密码"
      show-cancel-button
      class="common-confirm"
      @confirm="confirm"
      @close="close"
    >
    <input v-model="password" type="password" name="password" class="password" />
  </van-dialog>
</template>

<script>
import Vue from 'vue'
import { checkedPayPassword } from '@/api/order/order.js'
export default Vue.extend({
  name: 'TopBack',
  props: {
    showPwd: Boolean,
    default: false
  },
  data() {
    return {
      showDialog: false, // 支付密码弹框
      password: ''
    }
  },
  methods: {
    // 输入支付密码
    confirm() {
      this._checkedPayPassword()
    },
    // 验证密码
    _checkedPayPassword() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      const params = { pay_password: this.password }
      checkedPayPassword(params).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          if (res.data.status == 1) {
            this.$emit('closePwd')
            this.$emit('payPwdCallback', '')
            // this._getBalanceDraw()
          } else {
            this.$Error(res.data.msg)
            setTimeout(() => {
                window.location.reload()
              }, 1000)
          }
        } else {
          this.$Error(res.msg)
          setTimeout(() => {
              window.location.reload()
            }, 1000)
        }
      })
    },
    // 关闭弹窗时
    close() {
      this.$emit('closePwd')
    }
  },
  watch: {
    showPwd(val) {
      this.showDialog = val
    }
  }
})
</script>

<style lang="scss">
// 输入支付密码弹窗
.password {
  width: 80%;
  height: 80px;
  display: block;
  margin: 40px auto 50px;
  padding:15px 16px;
  outline: none;
  border: none;
  border-radius: 5px;
  background-color: #f3f2f2;
}
</style>